<?php /*a:3:{s:50:"E:\phpthink\work\tp\view\admins\reports\index.html";i:1652877596;s:18:"common/header.html";i:1652878502;s:18:"common/footer.html";i:1652023572;}*/ ?>


<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
  <title>图书馆管理系统</title>
  <!-- 引入 layui.css -->
  <link rel="stylesheet" href="http://127.0.0.1:8000/layui/css/layui.css">
  <link rel="stylesheet" href="http://127.0.0.1:8000/layer/layer.js">
  <!-- 引入 layui.js -->
  <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
  <link rel="stylesheet" href="http://127.0.0.1:8000/static/index.css">
  <script src="http://127.0.0.1:8000/layui/layui.js"></script>
  <link href="http://127.0.0.1:8000/bootstrap-3.4.1-dist/css/bootstrap.css" rel="stylesheet">
  <script src="http://127.0.0.1:8000/jquery-3.6.0.min.js"></script>
  <script src="http://127.0.0.1:8000/bootstrap-3.4.1-dist/js/bootstrap.js"></script>
  <script src="http://127.0.0.1:8000/echarts.min.js"></script>
</head>
<body>
<div class="layui-layout layui-layout-admin">
  <div class="layui-header">
    <div class="layui-logo layui-hide-xs layui-bg-black">图书管理系统</div>
    <ul class="layui-nav layui-layout-right">
      <li class="layui-nav-item"><a href="#"><?php echo session("username"); ?>&nbsp;已登录</a></li>
      <li class="layui-nav-item layui-hide layui-show-md-inline-block">
        <a href="javascript:;">
          更多操作
        </a>
        <dl class="layui-nav-child">
          <dd><a href="/signOut">退出登录</a></dd>
        </dl>
      </li>
    </ul>
  </div>

  <div class="layui-side layui-bg-black">
    <div class="layui-side-scroll">
      <!-- 左侧导航区域（可配合layui已有的垂直导航） -->
      <ul class="layui-nav layui-nav-tree" lay-filter="test">
        <li class="layui-nav-item layui-nav-itemed">
          <a class="" href="javascript:;">账号管理</a>
          <dl class="layui-nav-child">
            <dd><a href="/admins/admin">账号列表</a></dd>
          </dl>
        </li>
        <li class="layui-nav-item">
          <a href="javascript:;">权限管理</a>
          <dl class="layui-nav-child">
            <dd><a href="/admins/rights">权限管理</a></dd>
          </dl>
        </li>
        <li class="layui-nav-item">
          <a href="javascript:;">图书管理</a>
          <dl class="layui-nav-child">
            <dd><a href="/admins/booklist">图书列表</a></dd>
            <dd><a href="/admins/category">图书分类</a></dd>
            <dd><a href="/admins/publisher">供应商</a></dd>
          </dl>
        </li>
        <li class="layui-nav-item">
          <a href="javascript:;">借阅管理</a>
          <dl class="layui-nav-child">
            <dd><a href="/admins/lend">超时列表</a></dd>
          </dl>
        </li>
        <li class="layui-nav-item">
          <a href="javascript:;">数据统计</a>
          <dl class="layui-nav-child">
            <dd><a href="/admins/reports">数据报表</a></dd>
          </dl>
        </li>
      </ul>
    </div>
  </div>
<!-- 内容主体区域 -->
<div class="layui-body">
  <!--        <div style="padding: 15px;"><h1 style="font-weight: 700">欢迎界面</h1></div>-->
  <div id="user_container" style="padding: 15px;">
    <!--            面包屑导航-->
    <span class="layui-breadcrumb">
              <a href="#" style="font-weight: 700;color: #000!important;">首页</a>
              <a href="#" style="font-weight: 700;color: #000!important;">图书管理</a>
              <a href="" >数据报表</a>
            </span>
    <div class="layui-row layui-col-space15" style="margin-top: 15px">
      <div class="layui-col-md12">
        <div class="layui-panel" style="padding: 20px">
            <div id="main" style="width: 600px;height:400px;"></div>
        </div>
      </div>
    </div>
  </div>
</div>
</div>



<!--状态模板字符-->
<script type="text/html" id="currentTableBar">
  <a class="layui-btn layui-btn-normal layui-btn-sm data-count-edit" lay-event="edit"> <i class="layui-icon layui-icon-edit"></i></a>
  <a class="layui-btn layui-btn-sm layui-btn-danger data-count-delete" lay-event="delete"><i class="layui-icon layui-icon-delete"></i></a>
</script>


<script>
  document.querySelector('.layui-nav-itemed').classList.remove('layui-nav-itemed');
  $('a[href$=reports]').parent()[0].classList.add('layui-this');
  $('a[href$=reports]').parent().parent().parent()[0].classList.add('layui-nav-itemed');

  // 基于准备好的dom，初始化echarts实例


  var data1 = []
  var data2 = []
  $.get('/admins/reports/select',function (d) {
      var myChart = echarts.init(document.getElementById('main'));
      for (var i=0;i<d.length;i++){
          data1.push(d[i].lend_number)
          data2.push(d[i].bname)}
          // console.log(data2)
          // 指定图表的配置项和数据
          var option = {
              title: {
                  text: '图书借出情况'
              },
              color: [
                  '#91c7ae',
              ],
              tooltip: {},
              legend: {
                  data: ['解除数量']
              },
              xAxis: {
                  data: data2
              },
              yAxis: {},
              series: [
                  {
                      name: '数量',
                      type: 'bar',
                      data:data1
                  }
              ],

          };

          // 使用刚指定的配置项和数据显示图表。
          myChart.setOption(option);

  })



</script>



</body>

</html>
